<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/info-list.css"/><!--资讯列表-->
    <link rel="stylesheet" href="../../css/pop-ups.css"/><!--资讯列表-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <!--固定引用结束,自定义引用添加在下面-->
    <title>我的关注</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>

        /*************菜单选择器**开始**************/
        .search-inside-warp {
            height: 0.76rem;
            z-index: 5000;
        }

        .search-inside-warp .search-inside-column {
            height: 0.4rem;
            white-space: nowrap;
            width: 100%;
        }

        .search-inside-warp .search-inside-column .search-inside-item {
            height: 0.72rem;
            line-height: 0.72rem;
            margin: 0 0.32rem;
            color: rgba(34, 34, 34, 0.45)
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline {
            width: 100%;
            bottom: .04rem;
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline span {
            width: .36rem;
            background: rgba(44, 104, 255, 1);
            border-radius: .04rem;
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline .underactive {
            height: 0.04rem;
            width: 1.76rem;
        }

        .search-inside-warp .search-inside-column .active {
            color: rgba(44, 104, 255, 1);
        }

        .search-inside-warp .inside-inside-traneara {
            width: .4rem;
            height: .88rem;
            right: 1.08rem;
            background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        }


        .search-inside-warp .inside-inside-lefteara {
            width: .4rem;
            height: .88rem;
            left: 0;
            z-index: 11;
            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        }

        .search-inside-warp .column-img {
            width: .64rem;
            height: 0.72rem;
            /*margin-top: 0.14rem;*/
            margin-left: 0.44rem;
        }

        .search-inside-warp .column-img span {
            margin-left: 0;
        }

        /*************菜单选择器**结束**************/

        .index-data-business img {
            width: 100%;
            height: inherit;
        }


        .collection-info-data {

        }

        /*设置图表高度*/
        .industry-chart-content {
            min-height: 4.4rem;
            padding-top: 0.28rem;
        }

        /*给每一个数组图表元素设置格式*/
        .collection-data-item {
            padding: 0.32rem;
        }

        .help-center-division {
            height: 0.12rem;
            background: rgba(244, 244, 244, 1);
        }

        .table-list-collect {
            width: 0.8rem;
            height: 0.4rem;
            background-color: #F4F5F9;
            border-radius: 2px;
            text-align: center;
        }

        .table-list-isc {
            color: #2C68FF;
        }

        .table-list-noc {
            color: rgb(191, 191, 191)
        }

        .info-news-box {
            padding-top: .4rem;
            padding-bottom: .4rem;
            margin: 0 .32rem;
            /*border: solid 1px rgba(242, 242, 242, 1);*/
            /*border-width: 0 0 1px 0;*/
        }

        .info-quick-review {
            background: rgba(247, 248, 249, 1);
            border-radius: 4px;
            margin-top: .2rem;
            padding: .30rem .28rem;
        }

        .info-list-title {
            width: 100%;
            color: rgba(34, 34, 34, 1);
            line-height: 22px;
        }

        .info-quick-article {
            width: 6.86rem;
            height: .52rem;
            border-radius: .04px;
            line-height: .52rem;
        }

        .info-news-item {
            margin-top: .24rem;
        }

        .info-news-item img {
            width: .56rem;
            height: .32rem;
            border-radius: 2px;
            margin-right: .12rem;
        }

        .info-list-time {
            color: rgba(34, 34, 34, 0.45);
            line-height: 17px;
        }

        .info-quick-article div {
            background: rgba(246, 246, 246, 1);
            color: rgba(120, 140, 203, 1);
            padding-left: .52rem;
            padding-right: .16rem;
            border-radius: .04rem;
        }

        .info-quick-article span {
            left: .08rem;
            width: .28rem;
            height: .52rem;
            color: rgba(120, 140, 203, 1);
            border-radius: .04rem;
        }
    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<!-- 导航栏&标题栏 -->
<div class="flex-column h-100-p">

    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500">我的关注</div>

            <div class="right-bar">
            </div>
        </div>
    </div>

    <!--资讯&数据-->
    <!--问题分类-->
    <div class="flex-row bg-white search-inside-warp ">
        <div class="flex-row justify-content-center search-inside-column center-bar">

        </div>
    </div>

    <!--资讯和数据板块-->
    <!--外层控制padding-->
    <!--资讯快讯展示区-->
    <div id="mescrollinfo" class="flex-1  mescroll">
        <div class="flex-column  collection-info-data  ">
            <!--内层数据区域-->
            <div class="collection-list-info bg-white" id="infoListShow">

            </div>
        </div>
    </div>

    <!--数据展示区-->
    <div id="mescroll" class="flex-1  mescroll" style="display: none">
        <div class="flex-column  collection-info-data">
            <!--内层数据区域-->
            <div class="collection-list-data bg-white" id="dataListShow">

            </div>
        </div>
    </div>
</div>


<div class="prompt-tip-wrap" style="display: none"></div>
<div class="prompt-tip-triangle" style="display: none"></div>

</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<!--固定引用结束-->
<script src="../../js/api.js"></script>
<script src="../../js/protobuf.min.js"></script>
<script src="../../js/proto.js"></script>

<script src="../../js/date.js"></script>
<script src="../../js/dateConversion.js"></script>
<script src="../../js/template.js"></script>
<script src="../../js/echarts.min.js"></script>
<script src="../../js/table-list.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let currCode = 1

  let meScroll

  //定义菜单名
  let menu = [{
    name: '资讯',
    code: 1
  }, {
    name: '数据',
    code: 2
  }]

  //表单数据
  let pm = {
    stockList: [],
    isLogin: false
  }

  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.isLogin = !user.isGuest

    //初始化菜单列表(资讯,数据)
    initMenu()

    //初始化滚动条
    initScroll()

  }

  function reLoadPage() {
    pm.isLogin = !user.isGuest
  }


  //初始化菜单
  function initMenu() {
    let htmlStr = ''
    //初始化列表
    $.each(menu, function (i, it) {
      //初始化菜单编码
      pm[it.code] = {
        isScroll: true,
        lastDttm: DateUtils.getNowInt(),
        pageNum: 1,
        pageSize: 10,
        stockList: [],
        isLogin: false,
        isFirst: true
      }
      //初始化菜单
      htmlStr += '       <div class="ff500 fspx14  search-inside-item pos-r ' + (i === 0 ? ' active ' : '') + ' " onclick="changeColumn(' + it.code + ')">\n' +
        '                <span>' + it.name + '</span>\n' +
        '                <span class="flex-row justify-content-center search-inside-underline pos-a">\n' +
        '                    <span class=\'' + (i === 0 ? 'underactive' : '') + '\'></span>\n' +
        '                </span>\n' +
        '            </div>'
    })

    $('.search-inside-column').html(htmlStr)
    //增加绑定事件
    $('.search-inside-warp .search-inside-column .search-inside-item').each(function (i, n) {
      $(n).click(function () {
        $('.search-inside-warp .search-inside-column .search-inside-item').removeClass('active')
        $(n).addClass('active')
        $('.search-inside-warp .search-inside-column .search-inside-item .search-inside-underline span').removeClass('underactive')
        $(n).find('span').addClass('underactive')
      })
    })
  }

  //初始化滚动条
  function initScroll() {
    //如果是资讯
    if (currCode === 1) {
      //资讯区下拉刷新、滚动加载
      mescrollinfo = Template.createMeScroll({
        id: 'mescrollinfo', //区域ID
        pageNum: pm[currCode].pageNum,
        downCallback: refreshAchive, //下拉刷新入口,在此初始化时候会触发一次
        upCallback: getCallbackList //滚动加载入口
      })
    } else {
      //数据区下拉刷新、滚动加载
      meScroll = Template.createMeScroll({
        id: 'mescroll', //区域ID
        pageNum: pm[currCode].pageNum,
        downCallback: refreshAchiveData, //下拉刷新入口,在此初始化时候会触发一次
        upCallback: getCallbackListData //滚动加载入口
      })
    }
    //初始化之后就不再是第一次初始化了
    pm[currCode].isFirst = false
  }

  //菜单切换
  function changeColumn(e) {
    if (e !== currCode){
      currCode = e
      //初始化
      // pm.lastDttm = DateUtils.getNowInt()
      // pm.pageNum = 1
      // pm.stockList = []

      if (e === 1) {
        $('#mescrollinfo').show()
        $('#mescroll').css({display: 'none'})
        // getInfoList()
      }
      //如果选择的是数据
      else {
        $('#mescroll').show()
        $('#mescrollinfo').css({display: 'none'})

        //如果是首次加载数据区,先初始化滚动条
        if (pm[e].isFirst) {
          initScroll()
        } else {
        //getDataList()
        }
      }
    }
  }

  //获取资讯列表
  function getInfoList() {
    // 根据funcCode获取资讯列表
    Server.collection.getCollectionInfoList({
      lastDttm: pm[currCode].lastDttm,
      pageSize: pm[currCode].pageSize
    }).then(function (data) {
      if (data.body.list !== null) {
        pm[currCode].stockList = []
        //拼接html代码
        let htmlStr = ''
        $.each(data.body.list, function (i, item) {
          //处理分隔线
          if (pm[currCode].pageNum > 1 || i >= 1) {
            htmlStr += '<div class=\'info-list-topborder\'></div>'
          }
          if (item.infoType === '1' || item.infoType === '3' || item.infoType === '9') {
            //由于那边转换的名字限定为issuerDttm字段了,但是我们向要createDttm抓换,所以我们这里做了处理
            item.issuerDttm = item.createDttm
            if (item.exhibitionMode === '2' && Utils.notEmpty(item.coverImgUrl)) {
              htmlStr += Template.dealBigImgInfo(item)
            } else {
              htmlStr += Template.dealInfo(item)
            }
          } else if (item.infoType === '7') {
            htmlStr += dealRecKx(item)
          }
        })
        //如果是第一页直接重写,如果是其他的则再后面追加数据
        if (pm[currCode].pageNum === 1) {
          $('#infoListShow').html(htmlStr)
        } else {
          $('#infoListShow').append(htmlStr)
        }

        Template.stockRise()
        //记录下一次遍历的日期
        pm[currCode].lastDttm = data.body.lastDttm
        pm[currCode].pageNum++
        mescrollinfo.endSuccess(data.body.list.length, data.body.hasNextPage)
      }


    }).catch((error) => {
      mescrollinfo.endErr()
    })
  }

  //快讯
  function dealRecKx(item) {
    let isKx = 0
    // 004005001为快评 004005002为快讯
    if (item.funcCode === '004005001') {
      isKx = 1
    }
    let jsonStr = JSON.stringify({
      infoId: item.infoId,
      infoType: item.infoType
    })
    let htmlStr =
      '                   <div class="info-news-box" onclick=\'goDetail(' + jsonStr + ')\'>\n' +
      '                        <div class="info-list-title ff500 fspx15 line2">' + item.mainTitle + '</div>\n'
    if (item.trailContent) {
      htmlStr +=
        '                        <div class="info-quick-review ff400 fspx13"><div class=\'line4\'>' + item.trailContent + '</div></div>\n'
    }
    if (item.infos && item.infos.length > 0) {
      let obj = item.infos[0]
      htmlStr +=
        '                        <div class="flex-row info-quick-article ff500 fspx13 mt10 pos-r">' +
        '                            <span class="iconfont iconjuxingbeifen5 fspx16 pos-a"></span>' +
        '                            <div class=\'line1\'>' + obj.mainTitle + '</div>' +
        '                        </div>\n'
    }
    htmlStr +=
      '                        <div class="flex-row align-items-center info-news-item">\n' +
      '                            <img src="../../images/info/' + (isKx === 1 ? 'kp' : 'kx') + '@3x.png">\n' +
      '                            <div class="info-list-time ff400 fspx11">' + DateUtils.int2TimeDesc(item.createDttm) + '</div>\n' +
      '                        </div>\n' +
      '                    </div>'
    return htmlStr
  }


  //获取用户收藏的code列表
  function getDataList() {
    //获取图表数据信息
    Server.collection.getCollectionDataList({
      lastDttm: pm[currCode].lastDttm,
      pageSize: pm[currCode].pageSize
    }).then(function (data) {
      // 处理图表信息
      (data.body.list).forEach(item => {
        getData(item.collectionObjectId, item.collectionObjectId)
      })


      //记录下一次遍历的日期
      pm[currCode].lastDttm = data.body.lastDttm
      pm[currCode].pageNum++
      meScroll.endSuccess(data.body.list.length, data.body.hasNextPage)
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  //滚动加载入口
  function getCallbackList() {
    getInfoList()
  }

  //滚动加载入口
  function getCallbackListData() {
    getDataList()
  }

  //根据code画出表格
  function getData(subtopicCode, menuCode) {
    $('#dataListShow').append(`<div  id="childId_${subtopicCode}" class="industry-data-item collection-data-item"  ></div>`)
    $('#dataListShow').append(`<div class="flex-row help-center-division"></div>`)
    // 获取图表数据信息
    Server.collection.qrySubTopicDataSet({
      'data': [],
      'isFirstAccess': '1',
      'subtopicCode': subtopicCode,
    }).then(function (data) {
      // 处理图表信息
      data.data.collect = '1'
      dealChart(data.data, menuCode, 1)
    }).catch((error) => {
      jsBridge.log(error)
      // meScroll.endErr()
    })
  }


  //下拉刷新入口
  function refreshAchive() {
    pm[currCode].isScroll = false//初始化滚动状态
    pm[currCode].pageNum = 1
    pm[currCode].lastDttm = DateUtils.getNowInt()
    pm[currCode].isLogin = !user.isGuest
    //先移除下面所有子节点
    $('.collection-list-info').empty()
    getInfoList()
  }

  //下拉刷新入口
  function refreshAchiveData() {
    pm[currCode].isScroll = false//初始化滚动状态
    pm[currCode].pageNum = 1
    pm[currCode].lastDttm = DateUtils.getNowInt()
    pm[currCode].isLogin = !user.isGuest
    //先移除下面所有子节点
    $('.collection-list-data').empty()
    getDataList()
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }
</script>
</html>
